---
import BlogCard from "@/components/BlogCard.astro";
import ImageMod from "@/components/ImageMod.astro";
import Social from "@/components/Social.astro";
import Base from "@/layouts/Base.astro";
import { getSinglePage } from "@/lib/contentParser.astro";
import { slugify } from "@/lib/utils/textConverter";
import { render } from "astro:content";

// get all static paths for authors
export async function getStaticPaths() {
  const COLLECTION_FOLDER = "authors";
  const authors = await getSinglePage(COLLECTION_FOLDER);

  const paths = authors.map((author) => ({
    params: {
      single: author.id,
    },
    props: { author },
  }));
  return paths;
}

const { author } = Astro.props;
const { title, social, meta_title, description, image } = author.data;
const { Content } = await render(author);

// get all posts by author
const BLOG_FOLDER = "blog";
const posts = await getSinglePage(BLOG_FOLDER);
const postFilterByAuthor = posts.filter(
  (post) => slugify(post.data.author) === slugify(title)
);
---

<Base
  title={title}
  meta_title={meta_title}
  description={description}
  image={image}
>
  <section class="section-sm pb-0">
    <div class="container">
      <div
        class="row justify-center border-b border-border pb-14 dark:border-darkmode-border"
      >
        <div class="text-center lg:col-4">
          {
            image && (
              <ImageMod
                src={image}
                class="mx-auto mb-10 rounded"
                height={200}
                width={200}
                alt={title}
                format="webp"
              />
            )
          }
          <h1 class="h3 mb-6">{title}</h1>
          <div class="content">
            <Content />
          </div>
          <Social source={social} className="social-icons" />
        </div>
      </div>

      <div class="row justify-center pb-16 pt-14">
        {
          postFilterByAuthor.map((post) => (
            <div class="mb-12 md:col-6 lg:col-4">
              <BlogCard data={post} />
            </div>
          ))
        }
      </div>
    </div>
  </section>
</Base>
